<template>
	<div class="login">
		<div class="login_title">
			<img style="width: 100px; height: 100px;" src="../assets/images/icon_psrsonal_logo.png"/>
			<div class="login_title_text">
				<h4 style="font-size: 38px; font-weight: bold;">登录</h4>
				<h5 style="font-size: 18px;color:#999999">佛山燃气</h5>
			</div>
		</div>
		<div class="login-user_info">
			<div class="login-username">
				<h4>用户名</h4>
				<input class="login-username-input" type="text" placeholder="请输入账号" v-model="username"/>
				<div class="base_info-line"></div>
			</div>
			<div class="login-username">
				<h4>密码</h4>
				<div class="password_input">
					<input class="login-username-input" type="passwordType" placeholder="请输入密码"  :style="!showPass?'-webkit-text-security:disc':''"
						v-model="password"/>
					<img id="password" style="width: 30px;height: 25px;margin-top: 15px;margin-right:20px" src="../assets/images/icon-pass-invisiable.png" @click="showPassW()"/>
				</div>
				<div class="base_info-line"></div>
			</div>
			<div class="login_btn_parent">
				<img class="login_btn" src="../assets/images/btn_login.png" @click="bindLogin"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				username: '',
				showPass: false,
				passwordType: "text",
			}
		},
		components: {
			
		},
		methods: {
			bindLogin() {
				this.login();
			},
			showPassW() {
				this.showPass = this.showPass ? false : true;
				this.passwordType = this.showPass ? "text" : "password";
				document.getElementById("password").src = this.showPass ? require("@/assets/images/icon-pass-visiable.png") : require("@/assets/images/icon-pass-invisiable.png");
			},
			login() { //显示一个请求，等有接口后可以修改
				var _this = this
				let param = {};
				param.userName = _this.username;
				param.password = _this.password;
				_this.$api.reqApi.login(param).then(res => {
					console.log(JSON.stringify(res));
					_this.$LoadView.hideLoading();
					console.log(res);
					if (res.code === "200") {
						_this.$store.userBean = res.data
						_this.gotoHomePage()
					}
					_this.$LoadView.showToast(res.message);
				});
			},
			gotoHomePage(){
				 this.$router.push({ name: "index" });
			}

		},
		onReady() {
			
		},
		onBackPress() {
			plus.runtime.quit();
			return true
		}
	}
</script>

<style lang="stylus" scoped>
	page {
		height: 100%;
		width: 100%;
	}

	.base_info-line {
		width: 100%;
		padding-right:20px;
		height: 1px;
		background: #E0E2E6;
		margin: 10px auto;
	}

	.login {
		width: 100%;
		height: 100%;
		display: flex;
		padding:20px;
		flex-direction: column;
	}

	.bottom_img {
		width: 100%;
		height: 450rpx;
		position: absolute;
		bottom: 0;
	}

	.login_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 150px;
	}

	.login_title_text {
			display: flex;
			flex-direction: column;
			margin-left: 25px;
			color:#333333;
	}

	.login-user_info {
		margin-top: 80rpx;
		padding-right:20px;
	}

	.password_input {
		display: flex;
		flex-direction: row;
	}

	.login-username {
		display: flex;
		margin-bottom: 20px;
		flex-direction: column;
	}

	.login-username-input {
		margin-top: 10px;
		font-size: 0.3rem;
		flex-grow: 1;
		width: 200px;
		margin-left:12px;
		border:none;
	}

	.login_btn {
		width: 80px;
		height: 80px;
	}
	.login_btn_parent{
		width:100%;
		height:fit-content;
		text-align:center;
	}
</style>
